<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{width: 200px;}
    </style>
</head>
<body>
标题：<input type="text" id="title"><br/>
内容：<input type="text" id="conter"><br/>
作者：<input type="text" id="author"><br/>

<button id="btn">保存</button>

</body>
</html>
<script src="../../../1707/pool.js"></script>
<script>






    window.onload = function add(){
        var oDate = new Date();
        var obj=[
            [
                "ID",
                "帖子名称",
                "内容预览",
                "发布时间",
                "作者",
                "操作",

            ],
            [
                "1",
                "XXXX",
                "XXX",
                oDate,
                "xx",
                "",
            ]
        ];

        var oTitle = document.getElementById('title');
        var oConter = document.getElementById('conter');
        var oAuthor = document.getElementById('author');


        //创建表格头部
            var tab = document.createElement('table');

        tab.border=1;
            document.body.appendChild(tab);
            for(var i=0;i<1;i++){
                var tr = document.createElement('tr');
                for(var j=0;j<5;j++){
                    var td = document.createElement('td');

                    tr.appendChild(td)

                }

                var td1 = document.createElement('td');
                var text = document.createElement("a");

                text.innerHTML = "操作 ";
                td1.appendChild(text);
                tr.appendChild(td1);
                tab.appendChild(tr);

            }
        //创建第一栏
        for(var i=1;i<2;i++){
            var tr = document.createElement('tr');
            for(var j=0;j<5;j++){
                var td = document.createElement('td');

                tr.appendChild(td)

            }

            var td1 = document.createElement('td');
            var text = document.createElement("a");
            text.href="#";
            text.innerHTML = "详细信息 ";
            var dele = document.createElement("button");;
            dele.style.marginLeft=5+"px";
            dele.href="#";
            dele.innerHTML = " 删除";
            td1.appendChild(text);
            td1.appendChild(dele);

            tr.appendChild(td1);
            tab.appendChild(tr);

        }
        //写入数据
        var Drd =tab.getElementsByTagName("tr");

            for(var i=0;i<Drd.length;i++){
                for(var j=0;j<5;j++){
                    var Td =Drd[i].getElementsByTagName("td");

                    Td [j].innerHTML=obj[i][j];
                }
            }
   //点击事件  和二维数组的元素添加
        var n=1;
        btn.onclick=function () {
            var oDate = new Date();
            var Dr =tab.getElementsByTagName("tr");

            var m=Dr.length;
            console.log(m);
           obj.push([  ++n,
               oTitle.value,
               oConter.value,
               oDate,
               oAuthor.value,
              "", ]);
            for(var i=0;i<1;i++) {
                var tr = document.createElement('tr');

                for (var j = 0; j < 5; j++) {
                    var td = document.createElement('td');
                    tr.appendChild(td)

                }
                var td1 = document.createElement('td');
                var text = document.createElement("a");
                text.href="#";
                text.innerHTML = "详细信息 ";
                var dele = document.createElement("button");;
                dele.style.marginLeft=5+"px";
                dele.href="#";
                dele.innerHTML = " 删除";
                td1.appendChild(text);
                td1.appendChild(dele);

                tr.appendChild(td1);
                tab.appendChild(tr);
            }
            for(var i=0;i<Drd.length;i++){
                for(var j=0;j<5;j++){
                    var Td =Drd[i].getElementsByTagName("td");

                    Td [j].innerHTML=obj[i][j];

                }
            }
            // 删除事件
            var oTab = document.getElementsByTagName('table')[0];

            var oDele = oTab.getElementsByTagName('button');

            for(var i=0;i<oDele.length;i++){
                oDele[i].onclick = function(){
                    var tr = this.parentNode.parentNode;
                    tr.remove()
                }
            }}

        var Drd =tab.getElementsByTagName("tr");
        console.log(Drd);

//第一栏删除
        var oTab = document.getElementsByTagName('table')[0];

        var oDele = oTab.getElementsByTagName('button');

        for(var i=0;i<oDele.length;i++){
            oDele[i].onclick = function(){
                var tr = this.parentNode.parentNode;
                tr.remove()
            }
        }
     }

</script>
